<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/md5.js"></script>
    <script  type="text/javascript" src="/layer/layer.js"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="/html/head.html" height="60px" width="100%"></iframe>
<h3 align="center">商品详情</h3>
<br/>
<div class="col-xs-6 col-md-6  col-center-block">
    <table id="list" class="table table-hover" style="text-align: center;">
        <tr id="g_t">
            <td style="font-weight: bold">商品小图</td>
            <td><img src="#" id="g_thumb" alt="商品小图"/></td>
        </tr>
        <tr id="g_id">
            <td style="font-weight: bold">商品ID</td>
        </tr>
        <tr id="g_name">
            <td style="font-weight: bold">商品名称</td>
        </tr>
        <tr id="g_desc">
            <td style="font-weight: bold">商品描述</td>
        </tr>
        <tr id="g_o_p">
            <td style="font-weight: bold">商品原价</td>
        </tr>
        <tr id="g_p">
            <td style="font-weight: bold">商品秒杀价</td>
        </tr>
        <tr id="g_s">
            <td style="font-weight: bold">商品库存</td>
        </tr>
        <tr id="g_sid">
            <td style="font-weight: bold">商品卖家</td>
        </tr>
        <tr id="g_time">
            <td style="font-weight: bold">商品秒杀时间</td>
        </tr>
        <!--        <tr id="g_op">-->
        <!--            <td style="font-weight: bold">操作</td>-->
        <!--            <td>-->
        <!--                -->
        <!--            </td>-->
        <!--        </tr>-->
    </table>
    <div style="text-align: center; margin-left: 170px">
        <span class="bg-danger" id="tips">
            <span id="msg"></span>
            <span id="time"></span>
        </span>
            <span id="code_area" style="margin-left: 20px">
            <img id="code" width="80px" height="30px" alt="验证码" src="#"/>
            <input type="text" id="in_code" style="width: 70px"/>
        </span>
        <button type="button" disabled="disabled" class="btn btn-success" id="seckill" style="margin-left: 20px;width: 80px; height: 30px">
            秒杀
        </button>
        <span id="error" class="text-danger"></span>
    </div>
    <br/>
    <div style="margin-left: 420px">
        <img src="#" id="g_pic" alt="商品图片">
    </div>
</div>


<br/>

</body>
<script>
    $(function () {
        $("#code_area").hide();
        function getPathArg(url) {
            var idx = url.lastIndexOf("=") + 1;
            return url.substring(idx);
        }

        var time = 0;
        var timer;
        function countDown() {
            if(time <= 0) {
                clearTimeout(timer);
                $("#msg").text("秒杀进行中!");
                $("#time").text("");
                $("#seckill").removeAttr("disabled");
            } else {
                $("#msg").text("秒杀未开始！");
                timer = setTimeout(function () {
                    time--;
                    genderTime(time);
                    countDown();
                }, 1000);
            }
        }
        function genderTime(time) {
            var minute = Math.floor(time / 60);
            var sec = time % 60;
            var hour = Math.floor(minute / 60);
            minute = minute % 60;
            var day = Math.floor(hour / 24);
            hour = hour % 24;
            $("#time").text("倒计时 " + day + " 天 " + hour + " 小时 " + minute + " 分 " + sec + " 秒 ");
        }
        function toEnd() {

        }
        var goods_id = getPathArg(window.location.href);
        $.ajax({
            type: "GET",
            url: "/goods/" + goods_id,
            success: function (result) {
                if(result.code != 10001) {
                    if(result.code == 20005) {
                        routeLogin();
                    } else {
                        layer.msg(result.message);
                    }
                }
                var data = result.data;
                var goods_id = data.goodsId;
                var goods_name = data.goodsName;
                var goods_old_price = data.goodsOldPrice;
                var goods_price = data.goodsPrice;
                var goods_stock = data.goodsStock;
                var goods_thumb = data.goodsThumb;
                var goods_pic = data.goodsPic;
                var goods_desc = data.goodsDesc;
                var goods_saler_id = data.goodsSalerId;
                var start_time = data.startTime;
                var end_time = data.endTime;
                $("#g_id").append("<td>" + goods_id + "</td>");
                $("#g_name").append("<td>" + goods_name + "</td>");
                $("#g_o_p").append("<td>" + goods_old_price + "</td>");
                $("#g_p").append("<td>" + goods_price + "</td>");
                $("#g_s").append("<td>" + goods_stock + "</td>");
                $("#g_desc").append("<td>" + goods_desc + "</td>");
                $("#g_sid").append("<td>" + goods_saler_id + "</td>");
                $("#g_time").append("<td>" + start_time + " ~ " + end_time + "</td>");

                $("#g_pic").attr("src", goods_pic);
                $("#g_thumb").attr("src", goods_thumb);
            }
        });

        function routeLogin() {
            window.location.href = "/html/login.html";
        }

        function getTime() {
            $.ajax({
                type: "GET",
                url: "/goods/status/" + goods_id,
                success: function (result) {
                    var res = result.data;
                    console.log(res);
                    var msg = "";
                    if (res.code == 10001) {
                        msg = "秒杀未开始！";
                        $("#time").text("倒计时" + res.data + "秒");
                        time = res.data;
                        countDown();
                    } else if (res.code == 40004) {
                        msg = "秒杀进行中！";
                        $("#seckill").removeAttr("disabled");
                    } else if (res.code == 40005) {
                        msg = "秒杀已结束！";
                    } else {
                        routeLogin();
                    }
                    $("#msg").text(msg);
                }
            });
        }
        getTime();
        var flag = 0;
        $("#seckill").click(function () {
            $("#error").text("");
            if(flag == 0) {
                $("#code_area").show();
                genderCode();
                $("#error").text("请输入验证码");
                layer.msg("输入验证码");
                flag = 1;
            } else {
                seckill();
            }
        });
        function seckill() {
            var res = checkCode();
           if(!res) {
               $("#error").text("验证码错误");
               genderCode();
           } else {
               var path = genderPath();
               if(path != "#") {
                    doSeckill(path);

               }
           }
        }
        function g_showLoading(){
            var idx = layer.msg('处理中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '0px', time:100000}) ;
            return idx;
        }

        var resTimer;
        var resCnt = 0;

        function getresult() {
            if(resCnt > 5) {
                resCnt = 0;
                clearTimeout(resTimer);
                layer.msg("查询秒杀状态超时，请前往我的订单查看");
                return;
            }
            g_showLoading();
            $.ajax({
               type: "GET",
               url: "/seckill/" + goods_id,
               success: function (result) {
                   if(result.code != 10001) {
                       resCnt = 0;
                       if(result.code == 20005) {
                           routeLogin();
                       } else {
                           layer.msg(result.message);
                       }
                   } else {
                       console.log(result.data.code);
                       if(result.data =="SECKILL_SUCCESS") {
                           layer.closeAll();
                           resCnt = 0;
                           var path = getOrder().orderId;
                           clearTimeout(resTimer);
                           layer.confirm("恭喜你，秒杀成功！请于1分钟内支付订单，超时将关单。查看订单？", {btn:["确定","取消"]},
                               function(){
                                   window.location.href="/html/order_detail.html?orderId=" + path;
                               },
                               function(){
                                   layer.closeAll();
                               });
                       } else if(result.data == "SECKILL_FAILED") {
                           layer.closeAll();
                           resCnt = 0;
                           layer.msg("秒杀失败");
                           clearTimeout(resTimer);
                       } else {
                            resTimer = setTimeout(function () {
                                resCnt++;
                                getresult();
                            }, 1000);
                       }
                   }
               }
            });
        }
        function getOrder() {
            var order;
            $.ajax({
                type: "GET",
                url: "/order/goods/" + goods_id,
                async: false,
                success: function (result) {
                    if(result.code != 10001) {
                        if(result.code == 20005) {
                            routeLogin();
                        } else {
                            layer.msg(result.message);
                        }
                    } else {
                        order = result.data;
                    }
                }
            });
            return order;
        }
        function doSeckill(path) {
            $.ajax({
                type: "POST",
                url: "/seckill/" + goods_id,
                data: {
                    "path": path
                },
                success: function (result) {
                    if(result.code != 10001) {
                        if(result.code == 20005) {
                            routeLogin();
                        } else {
                            layer.msg(result.message);
                        }
                    } else {
                        getresult();
                    }
                }
            });
        }
        function checkCode() {
            console.log("先调通ceck");
             var flag = false;
             var code = $("#in_code").val();
             console.log(code);
            $.ajax({
                type: "POST",
                url: "/seckill/checkVerify/" + goods_id,
                async : false,
                data: {
                    "code": code
                },
                success: function (result) {
                    var data = result.data;
                    if(result.code != 10001) {
                        if(result.code == 20005) {
                            routeLogin();
                        } else {
                            layer.msg(result.message);
                        }
                    }else {
                        if(data) {
                            flag = true;
                        }
                    }
                }
            });
            return flag;
        }
        function genderPath() {
            var path = "#";
            $.ajax({
                type: "GET",
                async: false,
                url: "/seckill/path/" + goods_id,
                success: function (result) {
                    if(result.code != 10001) {
                        if(result.code == 20005) {
                            routeLogin();
                        } else {
                            layer.msg(result.message);
                        }
                    }else {
                        path = result.data;
                    }
                }
            });
            return path;
        }
        $("#code").click(function () {
           genderCode();
        });
        var codeCnt = 0;
        function genderCode() {
            if(codeCnt > 5) {
                alert("刷新频繁，请2秒后再试");
                setTimeout(function () {
                    codeCnt = 0;
                    alert("reset");
                }, 2000);
            } else {
                $("#code").attr("src", "/seckill/verifyCode/" + goods_id + "?cnt=" + codeCnt);
                codeCnt++;
            }
        }
    });
</script>
</html>